<template>
  <div v-cloak>
    <mt-header fixed :title="event.title">
      <router-link to="/" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
      <mt-button icon="more" slot="right"></mt-button>
    </mt-header>
    <mt-field label="姓名" placeholder="请输入姓名" v-model="enrollment.name"></mt-field>
    <mt-field label="电话" type="number" placeholder="请输入电话" v-if="show('phone')" v-model="enrollment.phone"></mt-field>
    <mt-field label="人数" type="number" placeholder="请输入人数" v-if="show('headcount')" v-model="enrollment.count"></mt-field>
    <mt-field label="备注" type="textarea" placeholder="请输入名称" v-if="show('remark')" v-model="enrollment.remark"></mt-field>
      <mt-button type="primary" class="btn-create" size="large" v-if="isOpen" @click="enroll()">报名</mt-button>
      <mt-button type="primary" class="btn-create" size="large" v-if="!isOpen" disabled>报名已截止</mt-button>

    <!-- 显示已有列表 -->
    <div class="tip">
      <span>已报名</span>
    </div>
    
    <mt-loadmore ref="loadmore">
      <ul>
        <li class="enroll-item" v-for="item in list">
          {{ item.name }}
        </li>
      </ul>
    </mt-loadmore>
  </div>
</template>


<script>
  export default {
    data() {
      return {
        enrollment:{
          user: '',
          phone: '',
          count: 1,
          remark: ''
        },
        options:['选项A', '选项B', '选项C'],
        list: [],
        event: {},
        isOpen: false,
      };
    },
    methods: {
      loadEnrollments() {
        const that = this;
        const URL = that.$const.ctx + '/api/event/' + that.$route.params.event + '/enroll';
        that.$http.get(URL).then(resp => {
          that.list = resp.data;
        })
      },
      loadEventInfo(){
        const that = this;
        const URL = that.$const.ctx + '/api/event/' + that.$route.params.event;
        that.$http.get(URL).then(resp => {
          that.options = resp.data.keys;
          that.event = resp.data.event;
          that.isOpen = resp.data.open;
        })
      },
      resetInput(){
        const e = {
          user: '',
          phone: '',
          count: 1,
          remark: ''
        };
        this.enrollment = e;
      },
      enroll(){
        const that = this;
        const postData = that.enrollment;
        const URL = that.$const.ctx + '/api/event/' + that.$route.params.event + '/enroll';
        that.$axios.post(URL, postData).then(resp => {
          if(resp.data.code === 1){
            that.$messagebox({
              title: '提示',
              message: resp.data.msg,
            });

          }
          else{
            that.resetInput();
            that.loadEnrollments();
            that.$toast({
              message: '操作成功',
              iconClass: 'icon icon-success'
            });
          }
        });
      },
      show(key){
        if(this.options.includes(key)){
          return true;
        } else {
          return false;
        }
      },
    },
    created(){
      this.loadEventInfo();
      this.loadEnrollments();
    },
  };
</script>

<style scoped>
  .btn-create {
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .enroll-item {
  border-top: 1px solid #e3e3e3;
  font-size: 16px;
  line-height: 2;
  padding: 5px 15px;
}
  .tip {
    text-align: center;
  }
[v-cloak] {
  display: none;
}
</style>
